<script lang="ts" setup>
import {ref} from 'vue'
import type {Card, CardListParams} from "@/types/car";
import {delCardAPI, getCardListApi} from "@/apis/car";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
// 1. 获取表格数据
const params = ref<CardListParams>({
  page: 1,
  pageSize: 5,
  carNumber: '', // 车牌号码
  personName: '', // 车主姓名
  cardStatus: undefined // 状态
})
const loading = ref(true)
const cardList = ref<Card[]>([]) //数据数组
const total = ref(0) // 总条数
const getCardList = async () => {
  // 特殊数据处理
  const tempParams = {...params.value}
  if(tempParams.cardStatus === -1){
    delete tempParams.cardStatus
  }
  const res = await getCardListApi(tempParams)
  cardList.value = res.data.rows
  total.value = res.data.total
  loading.value = false
}
getCardList()
// 2. 处理表格中一列的数据显示
const formatStatus = (card: Card) => {
  return card.cardStatus === 0 ? '可用' : '不可用'
}
const formatDate = (card: Card) => {
  return `${card.totalEffectiveDate}天`
}

// 3. 处理分页
const handleCurrentChange = (current: number) => {
  params.value.page = current
  getCardList()
}
const handleSizeChange = (size: number) => {
  params.value.pageSize = size
  getCardList()
}
// 4. 处理搜索
const cardStatusList = [
  {id: -1,
  name: '全部'
  },
  {id: 0,
    name: '可用'
  },
  {id: 1,
    name: '已过期'
  },

]
// 5. 点击搜索
const onSearch = ()=>{
  params.value.page = 1
  getCardList()
}
// 点击重置
const onReset = ()=>{
  params.value.carNumber = undefined
  params.value.personName = undefined
  params.value.cardStatus = undefined
  params.value.page = 1
  getCardList()
}
const router = useRouter()
const editCard = (id: string)=>{
  router.push({
    path: '/cardAdd',
    query: {
      id
    }
  })
}
// 删除
const deleteCard = async (id: string)=>{
  const res = await ElMessageBox.confirm('此操作将永远删除该月卡，是否继续?','提示',{
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  if (res === 'confirm') {
    await delCardAPI(id)
    ElMessage({message: '删除成功',type: 'success'})
    await getCardList()
  }
}
// 多选
const selectedCarList = ref<Card[]>([])
const handleSelectionChange = (rowList: Card[])=>{
  selectedCarList.value = rowList
}
const delMoreCard = ()=>{
  if (selectedCarList.value.length === 0){
    return ElMessage({message: '请选择要删除的数据',type: 'warning'})
  }
  const ids = selectedCarList.value.map(item => item.id)
  deleteCard(ids.join(','))
}
</script>

<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>
      <el-input v-model="params.carNumber" class="search-main" clearable placeholder="请输入内容" />
      <span class="search-label">车主姓名：</span>
      <el-input v-model="params.personName" class="search-main" clearable placeholder="请输入内容"/>
      <span class="search-label">状态：</span>
      <el-select v-model="params.cardStatus" style="width: 240px">
        <el-option v-for="item in cardStatusList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-button class="search-btn" type="primary" @click="onSearch">查询</el-button>
      <el-button class="search-btn" type="danger" @click="onReset">重置</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/cardAdd')">添加月卡</el-button>
      <el-button @click="delMoreCard">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table v-loading="loading" :data="cardList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="序号" type="index" width="100"/>
        <el-table-column align="center" label="车主名称" prop="personName"/>
        <el-table-column align="center" label="联系方式" prop="phoneNumber"/>
        <el-table-column align="center" label="车牌号码" prop="carNumber"/>
        <el-table-column align="center" label="车辆品牌" prop="carBrand"/>
        <el-table-column :formatter="formatDate" align="center" label="剩余有效天数"/>
        <el-table-column :formatter="formatStatus" align="center" label="状态"/>
        <el-table-column align="center" fixed="right" label="操作" width="260">
          <template v-slot="scope">
            <el-button size="small" type="text">续费</el-button>
            <el-button size="small" type="text">查看</el-button>
            <el-button size="mini" type="text" @click="editCard(scope.row.id)">编辑</el-button>
            <el-button size="small" type="text" @click="deleteCard(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container" style="float: right">
      <el-pagination v-model:current-page="params.page" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 20, 30]" :total="total"
                     layout="total, prev, pager, next, sizes"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"/>
    </div>
  </div>

</template>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>